<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    title="详细信息"
    width="50%"
  >
    <div class="base-info">
      <el-form ref="form" :model="form" :inline="true" label-width="120px">
        <el-form-item label="检查单号:">
          <span>{{ form.formNo }}</span>
        </el-form-item>
        <el-form-item label="检查表单类型:">
          <span>{{ $t(form.formTypeView) }}</span>
        </el-form-item>
        <el-form-item label="备件编号:">
          <span>{{ form.toolingBarcode }}</span>
        </el-form-item>
        <el-form-item label="备件型号:">
          <span>{{ form.toolingModel }}</span>
        </el-form-item>
        <el-form-item label="创建人:">
          <span>{{ form.creator }}</span>
        </el-form-item>
        <el-form-item label="创建时间:">
          <span>{{ form.createTime }}</span>
        </el-form-item>
      </el-form>
    </div>
    <dynTable
      ref="dynTable"
      :loading="tableLoading"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
  </el-dialog>
</template>

<script>
import mySetting from '@/mixins/mySetting'
export default {
  name: 'RepairHistoryInfo',
  mixins: [mySetting],
  data() {
    return {
      dialogVisible: false,
      form: {},
      tableColumns: [
        { prop: '', label: '序号', type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'itemName', label: '处理人' },
        { prop: 'itemValue', label: '处理时间' },
        { prop: 'itemValue', label: '处理动作' },
        { prop: 'itemValue', label: '处理结果' }
      ],
      tableLoading: false
    }
  },
  methods: {
    handleOpen() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .el-form-item {
      width: 48%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
